<style>
.goods-item-wrap {
    float: left;
    width: 50%;
}
.goods-item-padding {
    padding: 0 3px;
}
.goods-item {
    background: #efefef;
}
.nearby_goods .app-header {
    position: fixed;
    width: 100%;
    top: 0;
    background: #fff;
}
.distance-input-wrap {
    margin-top: 48px;
}
.distance-input-wrap input {
    width: 100%;
    height: 30px;
    border: 1px solid #ccc;
}
</style>
<template>
    <div id="app" class="page-root">
        <app-header class="app-header">
            <div>附近商品</div>
        </app-header>
        <div class="split-line"></div>
        <div class="goods-container clearfix">
            <div class="goods-item-wrap" v-for="(goodsItem, index) in goodsItems" :key="index">
                <div class="goods-item-padding">
                    <goods-item class="goods-item" @click="clickGoodsItemHandler" :goodsItem="goodsItem"></goods-item>
                </div>
            </div>
            <div class="nodata-wrap" v-if="requestDone&&!goodsItems.length">
                <img class="logo-nodata" src="../../css/images/logo.png" alt="">
                <div class="nodata-tip">暂无数据</div>
            </div>
        </div>
    </div>
</template>

<script>
import utils from '@utils'
import { list } from './api'

export default {
    name: 'app',
    mixins: [ utils.MixinBase ],
    data() {
        return {
            distance: '5000000',
            location: [],
            goodsItems: [],
            requestDone: false,
        }
    },
    mounted() {
        this.$indicator.open({
            spinnerType: 'fading-circle',
            text: '加载中...'
        });
        this.wechatInit().then(()=> {
            this.wechatConfigInit().then(()=> {
                var shareOptions = {
                    shareTitle: "坚冰商务",
                    shareDesc: "亲！还在等什么，快来看看！",
                    shareUrl: utils.createAuthLink("index.html"),
                    sharePic: ''
                }

                utils.shareHandler({
                    type: 'timeLine',
                    ...shareOptions
                })

                utils.shareHandler({
                    type: 'appMessage',
                    ...shareOptions
                })
                this.$indicator.close();
                this.init();
            }, () => {
                this.$indicator.close();
            });
        });
    },
    methods: {
        init() {
            wx.getLocation({
                type : 'wgs84',
                success: (res) => {
                    this.location = [res.latitude, res.longitude];
                    this.fetchData();
                }
            })
        },
        fetchData() {
            var param = {
                distance: this.distance,
                location: this.location
            }
            this.requestDone = false;

            list(param).then((data) => {
                this.requestDone = true;
                this.goodsItems = data;
                this.$indicator.close();
            })
        },
        clickGoodsItemHandler(goodsItem) {
            utils.goToPage("product_detail.html?id="+goodsItem.id);
        }
    }
}
</script>
<style>
.nearby_goods .page-root {
    padding-top: 40px;
}
.nodata-wrap {
    margin-top: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.logo-nodata {
    width: 150px;
    height: 150px;
}
.nodata-tip {
    font-size: 16px;
    color: #666;
}
</style>